<template>
  <f-page-layout
    showBack
    showExit
    title="多页签表单或详情布局界面"
    class="form-table-item-page"
    @change="(key) => (activeKey = key)"
    :tabs="tabs">
    <template #tab1>
      {{ activeKey }}
      <f-form-layout responsive :columns="columns" :model="model"></f-form-layout>
    </template>
    <template #tab2>
      <div>{{ activeKey }}</div>
    </template>
  </f-page-layout>
</template>
<script setup lang="ts">
import { h, ref } from 'vue';
import AFormLayout from './Aformlayout.vue';
const activeKey = ref('1');
const tableRef = ref();
const options = ref([
  { label: '合格', value: '1' },
  { label: '不合格', value: '2' }
]);
let editRef = null;
const tabs = ref([
  //  每个tab的插槽 以  tab+ key，如果没有指定key则为index从0开开始
  { label: '选项1', key: '1' },
  { label: '选项2', key: '2' },
  { label: '选项3', key: '3', disabled: true },
  { label: '选项4', key: '4' },
  { label: '选项5', key: '5' },
  { label: '选项6', key: '6' },
  { label: '选项7', key: '7' },
  { label: '选项8', key: '8' }
]);
const columns = ref([
  {
    label: '基础信息',
    columns: [
      {
        label: '字段1',
        field: 'f1',
        type: 'dictionary',
        required: true,
        props: {
          code: 'invoiceMode'
        }
      },
      {
        label: 'date',
        type: 'date',
        field: 'date',
        props: {
          valueFormat: 'YYYY-MM-DD',
          format: 'YYYY-MM-DD'
        }
      },
      { label: '字段1', field: 'f2', required: true },
      { label: '字段1', field: 'f3' },
      { label: '字段1', field: 'f4' },
      { label: '字段1', field: 'f5' },
      { label: '字段1', field: 'f6' }
    ]
  },

  {
    field: 'list',
    type: 'form-edit-table',
    span: 24,
    props: {
      title: '表格编辑',
      useAdd: true,
      useCheckbox: true,
      useRemove: false,
      useBatchRemove: 'ON',
      useClear: true,
      insertPosition: 'bottom',
      validateOnAdd: true,
      validateOnHide: true,
      // debounce: 300,
      rowKey: 'key',
      fixed: [2, 0],
      editRowTrigger: 'click-cell',
      editMode: 'row',
      useInsert: true,
      collapsed: true,
      tableRef: (value) => (tableRef.value = value),
      onCheck: (e) => {
        console.log('ref change', e);
      },
      config: {
        scrollY: { enabled: true }
      },
      tableSlots: {
        bottom: () => {
          return h('div', { style: { padding: '10px 0' } }, '表格底部插槽');
        }
      },
      actions: [
        {
          label: '校验',
          click: async () => {
            const res = await tableRef.value.validateWithoutForm({ first: false, message: true });
          }
        }
      ],
      columns: [
        {
          minWidth: 120,
          title: '产品编号',
          field: 'code',
          editType: 'product-picker',
          props: ({ row }) => {
            return {
              onSelect: ({ row: newItem }) => {
                Object.assign(row, { ...newItem, taxRate: newItem.taxRate * 100 || 0 });
              }
            };
          }
        },
        {
          minWidth: 120,
          title: '产品名称',
          field: 'name'
        },
        {
          minWidth: 120,
          required: ({ row }) => row.name,
          title: '数量',
          field: 'qty',
          editType: 'input-number',
          className: ({ row }) => (row.$error_qty ? 'error-cell' : '')
        },
        {
          minWidth: 120,
          title: '生产日期',
          field: 'productionDate',
          required: ({ row }) => row.name,
          editType: 'date',
          className: ({ row }) => (row.$error_productionDate ? 'error-cell' : ''),
          props: {
            dropdownClassName: 'ignore-cell-click'
          }
        },
        {
          minWidth: 120,
          title: '失效日期',
          field: 'expireDate',
          editType: 'date',
          required: ({ row }) => row.name,
          props: {
            dropdownClassName: 'ignore-cell-click'
          }
        },
        {
          title: '配置',
          children: [
            {
              minWidth: 120,
              title: '是否批管理',
              field: 'isBatch',
              editType: 'switch',
              valueKey: 'checked',
              required: ({ row }) => row.name,
              formatter: ({ cellValue }) => (cellValue ? '是' : '否'),
              props: {
                size: 'small',
                checkedChildren: '是',
                unCheckedChildren: '否'
              }
            },
            {
              minWidth: 120,
              title: '是否序列号',
              field: 'isSerial',
              required: ({ row }) => row.name,
              editType: 'switch',
              valueKey: 'checked',
              formatter: ({ cellValue }) => (cellValue ? '是' : '否'),
              props: {
                size: 'small',
                checkedChildren: '是',
                unCheckedChildren: '否'
              }
            },
            {
              minWidth: 120,
              title: '是否加成',
              field: 'isAdd',
              editType: 'switch',
              required: ({ row }) => row.name,
              valueKey: 'checked',
              formatter: ({ cellValue }) => (cellValue ? '是' : '否'),
              props: {
                size: 'small',
                checkedChildren: '是',
                unCheckedChildren: '否'
              }
            },
            {
              minWidth: 120,
              title: '是否含税',
              field: 'isTax',
              editType: 'switch',
              valueKey: 'checked',
              required: ({ row }) => row.name,
              formatter: ({ cellValue }) => (cellValue ? '是' : '否'),
              props: {
                size: 'small',
                checkedChildren: '是',
                unCheckedChildren: '否'
              }
            }
          ]
        },
        {
          minWidth: 180,
          title: '序列号',
          field: 'serialNo',
          editType: 'select',
          required: ({ row }) => row.name,
          props: {
            mode: 'tags',
            dropdownClassName: 'ignore-cell-click',
            notFoundContent: null,
            maxTagCount: 0
          }
        },
        {
          minWidth: 120,
          title: '合格',
          field: 'quality',
          type: 'select',
          required: ({ row }) => row.name,
          formatter: ({ cellValue }) => (cellValue == '1' ? '合格' : '不合格'),
          props: {
            query: () => options.value
          }
        },
        {
          minWidth: 120,
          title: '单价（不含税）',
          required: ({ row }) => row.name,
          field: 'price',
          editType: 'input-number'
        },
        {
          minWidth: 120,
          title: '税率',
          field: 'taxRate',
          editType: 'input-number',
          formatter: ({ row }) => (row.taxRate / 100 || 0) + '%',
          required: ({ row }) => row.isTax && row.name
        },
        {
          minWidth: 120,
          title: '含税金额',
          field: 'taxPrice',
          formatter: ({ row }) => (row.price * (1 + row.taxRate / 100) || 0).toFixed(2)
        },
        {
          minWidth: 120,
          title: '合计金额',
          field: 'totalPrice',
          formatter: ({ row }) => (row.price * row.qty || 0).toFixed(2)
        },
        {
          minWidth: 120,
          title: '税额(合计)',
          field: 'taxAmount',
          formatter: ({ row }) => (row.price * (row.taxRate / 100) * row.qty || 0).toFixed(2)
        },
        {
          minWidth: 120,
          title: '价税合计',
          field: 'totalTaxPrice',
          formatter: ({ row }) => (row.price * (1 + row.taxRate / 100) * row.qty || 0).toFixed(2)
        },
        {
          minWidth: 120,
          title: '加成金额',
          field: 'addPrice',
          editType: 'input-number',
          required: ({ row }) => row.isAdd && row.name
        },
        {
          minWidth: 120,
          title: '售价',
          field: 'salePrice',
          align: 'right',
          editType: 'input-number',
          formatter: ({ row }) => (row.price ?? 0) + (row.addPrice ?? 0)
        },
        {
          title: '属性',
          field: 'prop',
          minWidth: 120,
          editType: 'select',
          formatter: ({ row }) =>
            (Array.isArray(row.prop) ? row.prop : row.prop ? [row.prop] : [])
              .map((item) => {
                return [, '进口', '纯手工', '嘻嘻'][item];
              })
              .join(','),
          props: {
            mode: 'multiple',
            dropdownClassName: 'ignore-cell-click',
            options: [
              { label: '进口', value: '1' },
              { label: '纯手工', value: '2' },
              { label: '嘻嘻', value: '3' }
            ]
          }
        }
      ]
    }
  }
]);
const model = ref<any>({
  list: new Array(5000).fill(null).map((item) => ({
    name: Math.random(),
    isTax: false
  }))
});
</script>
